<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45cbff;}
	#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境
		var num = 0;
		var n = 0;

	 	oGC.translate(200,200);
	 	setInterval(function () {
	 		num ++;
	 		oGC.clearRect(-200, -200, oC.width, oC.height);		//由于偏离的原因，原点的位置改变了 

	 		oGC.save();											//封闭起来，否则num的前一个会影响后一个，使得速度越来越快

	 		n +=2;
	 		if ( n== 100) {
	 			n = -100;
	 		} 
	 		oGC.scale(n*1/50, n*1/50);

	 		oGC.rotate(num*Math.PI/180);
	 		oGC.translate(-50, -50);			//让它以中心点旋转

	 		oGC.fillRect(0,0,100,100);
	 		oGC.restore();
	 	},30);
	}
	</script>
</head>
<body>
	<canvas id="c1" width="500" height="500">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>